{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import create %}
{% from 'IcsocUIBundle:Macro:formValidator.html.twig' import jqvalidator %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@gritter_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}
{% block content %}
    <div class="page-content">
            {{ form_start(form, {'attr':{'id':'validation-form'}}) }}
              {{ form_row(form.isIncomingEnableBlack) }}
              {{ form_row(form.isEnableBlack) }}
              {{ form_row(form.isEnableWhite) }}
              <div class="hidden" id="isEnableWhite">
                <div class="col-xs-1"></div>
                <div class="col-xs-11">
                     {{ form_row(form.whiteType) }}
                    <div id="whiteAdress">{{ form_row(form.whiteSound) }}</div>
                </div>
              </div>
              {#{{ form_row(form.isEnableGroup) }}#}
              {{ form_row(form.toolBarOptions.systemName) }}
        {% if isOrigin == 1 %}
            <div class="form-group">
                <label for="settingForm_toolBarOptions_evaluateSound" class="col-sm-3 control-label no-padding-right">{{ 'The satisfaction evaluation of speech'|trans }}</label>
                <div class="col-sm-9">
                    <audio id="sound_player" class="align-middle" style="color: white;width: 500px;" autoplay="autoplay" controls="controls" src=""> {{ 'Your browser does not support the player'|trans }}</audio>
                    <button type="button" class="btn btn-xs btn-primary" onclick="defaultEvalue()" id="defaultEvaluate">{{ 'Restore default'|trans }}</button>
                    <button type="button" class="btn btn-xs btn-primary" onclick="playEvalueSound()">{{ 'Listen in'|trans }}</button>
                </div>
            </div>
            {{ form_row(form.toolBarOptions.evaluateSound) }}
        {% endif %}
              {# {{ form_row(form.toolBarOptions.evaluateSound) }} #}
              {{ form_row(form.toolBar) }}
               <div class="hidden" id="toolBar">
                  <div class="col-xs-1"></div>
                  <div class="col-xs-11">
                      {{ form_row(form.toolBarOptions.indexPage) }}
                      {{ form_row(form.toolBarOptions.inpopPage) }}
                      {{ form_row(form.toolBarOptions.outpopPage) }}
                   </div>
               </div>
                {{ form_row(form.statistical) }}
                <div class="hidden" id="statistical">
                    <div class="col-xs-1"></div>
                    <div class="col-xs-11">
                        {{ form_row(form.connNum) }}
                        {{ form_row(form.lostNum) }}
                    </div>
                </div>
                 {#<div class="form-group">
                     <label class="col-sm-3 control-label no-padding-right">{{ 'Messages sent to the customer'|trans }}</label>
                </div>
                <div class="row">
                    <div class="col-xs-1"></div>
                    <div class="col-xs-11">
                        {{ form_row(form.smsOptions.isConnect) }}
                        <div class="{% if isConnect == 1 %}show{% else %}hide{% endif %}" id="connect_content">{{ form_row(form.smsOptions.connectSms) }}</div>
                        {{ form_row(form.smsOptions.isBusy) }}
                        <div class="{% if isBusy == 1 %}show{% else %}hide{% endif %}" id="busy_content">{{ form_row(form.smsOptions.busySms) }}</div>
                    </div>
                 </div>#}
                {#<div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right">{{ 'Messages sent to the agent'|trans }}</label>
                </div>
                <div class="row">
                    <div class="col-xs-1"></div>
                    <div class="col-xs-11">
                        {{ form_row(form.toolBarOptions.endsmsType) }}
                        {{ form_row(form.toolBarOptions.endsmsPhone) }}
                    </div>
                </div>#}
                {{ form_row(form.isEnableEvaluate) }}
                <div class="clearfix form-actions">
                    <div class="col-md-offset-3 col-md-9">
                        <button class="btn btn-info" type="submit">
                            <i class="ace-icon fa fa-check bigger-110"></i>
                            {{ 'Submit'|trans }}
                        </button>
                        &nbsp; &nbsp; &nbsp;
                        <button class="btn" type="reset">
                            <i class="ace-icon fa fa-undo bigger-110"></i>
                            {{ 'Reset'|trans }}
                        </button>
                    </div>
                </div>
            {{ form_end(form) }}
    </div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@jqvalidate_js'
    '@common_js'
    '@gritter_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script>
        var isOrigin = {{ isOrigin }};
        function switchOption(objName)
        {
            var name = "settingForm["+objName+"]";
            var objs = $("input[name='"+name+"']");
            var val = 0;
            for (var i=0; i<objs.length;i++) {
                if (objs[i].checked) {
                    val = $(objs[i]).val();
                }
            }
            if (val == 1) {
                $('#'+objName).attr('class', 'show');
            } else {
                $('#'+objName).attr('class', 'hidden');
            }
        }
        $(document).ready(function(){
            if (isOrigin != 1) {
                $('#settingForm_toolBarOptions_evaluateSound').parent().parent().parent().parent().hide();
            }
            switchOption('toolBar');
            switchOption('statistical');
            switchOption('isEnableWhite');
            switchWhite();
            $('input[name="settingForm[smsOptions][isConnect]"]').on("click", function(){
                var val = $(this).val();
                switchContent(val, "#connect_content");
            });
            $('input[name="settingForm[smsOptions][isBusy]"]').on("click", function(){
                var val = $(this).val();
                switchContent(val, "#busy_content");
            });
            $('#defaultEvaluate').popover({
                placement:'top',
                html:true,
                content:'<div>{{ "You confirm restore default do"|trans }}?</div><div><button type="button" onclick="setEvalue()">{{ "Confirmation"|trans }}</button>&nbsp;&nbsp;<button type="button" onclick="cancelEvalue()">{{ "Cancel"|trans }}</button></div>'
            });
        });
        function switchContent(val, id) {
            var dis = val == 1 ? 'show' : 'hide';
            $(id).attr("class", dis);
        }
        $('#validation-form').validate({
            {{ jqvalidator() }}
            rules: {
                'settingForm[smsOptions][connectSms]': {
                    required:function(){
                        return $("input[name='settingForm[smsOptions][isConnect]']:checked").val() == 1 ? true : false;
                    }
                },
                'settingForm[smsOptions][busySms]': {
                    required:function(){
                       return $("input[name='settingForm[smsOptions][isBusy]']:checked").val() == 1 ? true : false;
                    }
                }
            },
            messages: {
                'settingForm[smsOptions][connectSms]': {required:"{{ 'Please fill in the content'|trans  }}"},
                'settingForm[smsOptions][busySms]': {required:"{{ 'Please fill in the content'|trans  }}"}
            }
        });
        jQuery.extend(jQuery.validator.messages, {
            'required':'{{ 'This field is required'|trans }}'
        });

        function defaultEvalue() {
            $('#defaultEvaluate').popover();
        }
        function setEvalue() {
            $('#defaultEvaluate').popover('hide');
            if (isOrigin == 1) {
                $.ajax({
                 type: 'post',
                 url: '{{ path('icsoc_security_setting_evaluate_default') }}',
                 dataType: 'json',
                 success: function (res) {
                 if (!res.error) {
                 gritterAlert('{{ 'Prompt'|trans }}', '{{ 'Success'|trans }}','success');
                 $('#settingForm_toolBarOptions_evaluateSound').val('');
                 playEvalueSound();
                 } else {
                 var message = res.error == 2 ? '{{ 'Overloading failure'|trans }}' : '{{ 'Failure'|trans }}';
                 gritterAlert('{{ 'Prompt'|trans }}', message, 'error');
                 }
                 }
                });
            }
        }
        function cancelEvalue() {
            $('#defaultEvaluate').popover('hide');
        }

        function playEvalueSound () {
            $('#sound_player').attr('src', "{{ path('icsoc_security_setting_evaluate_play') }}");
        }

        function switchWhite() {
            var name = "settingForm[whiteType]";
            var objs = $("input[name='"+name+"']");
            var val = 0;
            for (var i=0; i<objs.length;i++) {
                if (objs[i].checked) {
                    val = $(objs[i]).val();
                }
            }
            if (val == 2) {
                $('#whiteAdress').attr('class', 'show');
            } else {
                $('#whiteAdress').attr('class', 'hidden');
            }
        }
    </script>
{% endblock %}